import { ref, reactive } from 'vue';

// 播放状态
export const isPlaying = ref(true);
// 窗口状态
export const isFloatWin = ref(true);
// 窗口位置坐标
export const playerWinPoint = reactive({
    x: '83%',
    y: '20%',
});
// 过渡时间
export const delay = ref('0.3');


// 历史位置
const history_point = {
    x: '83%',
    y: '20%',
}

// 移动距离
export const move = reactive({
    x: 0,
    y: 0,
});

export function togglePlay() {
    // 保存当前位置
    history_point.x = playerWinPoint.x;
    history_point.y = playerWinPoint.y;
    // 修改窗口位置
    playerWinPoint.x = 0;
    playerWinPoint.y = 0;
    // 修改窗口状态
    isFloatWin.value = false;
}

export function toggleFloat() {
    // 恢复历史位置
    playerWinPoint.x = history_point.x;
    playerWinPoint.y = history_point.y;
    // 修改窗口状态
    isFloatWin.value = true;
}

// 是否要触发 click事件 的flag
let isClick = false;

// 触摸事件
let startX = 0;    // 一开始的触摸位置 X轴
let startY = 0;    // 一开始的触摸位置 Y轴

// 是否按下状态
let isTouching = false;


export function onTouchStart(e) {
    if (isFloatWin.value) {
        // 阻止事件冒泡
        e.preventDefault();
        // 标记按下状态
        isTouching = true;
        isClick = true;
        // 记录触摸起始位置
        const touch = e.touches[0];
        startX = touch.clientX;
        startY = touch.clientY;
        // 重置移动距离
        move.x = move.y = 0;
        // 记录窗口当前位置
        let musicPlayerBox =  document.querySelector('.music-player-box');
        playerWinPoint.x = musicPlayerBox.offsetLeft + 'px';
        playerWinPoint.y = musicPlayerBox.offsetTop + 'px';
    }
}

export function onTouchMove(e) {
    // 阻止事件冒泡
    e.preventDefault();
    if (isTouching) {
        // 标记点击事件不触发
        isClick = false;
        // 记录触摸移动位置
        const touch = e.touches[0];
        move.x = touch.clientX - startX;
        move.y = touch.clientY - startY;
    }
}

export function onTouchEnd(e) {
    if (isFloatWin.value && isTouching) {
        if (isClick) {
            // 点击事件
            togglePlay();
        } else {
            // 阻止事件冒泡并标记按下状态
            e.preventDefault();
            isTouching = false;
            // 计算移动距离
            playerWinPoint.x = parseInt(playerWinPoint.x) + move.x + 'px';
            playerWinPoint.y = parseInt(playerWinPoint.y) + move.y + 'px';
            // 清除移动距离
            move.x = move.y = 0;
            // 去除delay
            delay.value = '0'
            setTimeout(() => {
                delay.value = '0.3';
            }, 300);
        }
    }
}
